@import "gradebook-sorter";

.#{$namespace}sakai-gradebookng {

  #gradebookSpreadsheet,
  #gradebookGradesToolbar {
    margin-top: 15px;
  }
  #gradeTableWrapper {
    position: relative;
    overflow: visible;
  }

  #gradeTableWrapper {
    font-size: 0.9em;
  }
  #gradeTableWrapper td {
    text-align: center;
    vertical-align: middle;
  }
  #gradeTableWrapper tbody .tabulator-col {
    text-align: left;
    vertical-align: middle;
  }
  #gradeTableWrapper .gb-section-cell {
    direction: rtl;
  }
  #gradeTableWrapper .gb-section-button {
    margin: 1px 0px 2px 2px !important;
    padding: 2px 2px !important;
    font-size: 12px !important;
  }
  #gradeTableWrapper .gb-student-number-cell .rowHeader {
    font-size: 12px;
  }
  #gradeTableWrapper .tabulator-editable.tabulator-editing {
    border: 2px solid #007bff !important;
    box-shadow: 0 0 5px rgba(157, 198, 243, 0.75);
    background-color: var(--sakai-background-color-5) !important;
  }
  #gradeTableWrapper .tabulator-editing .gradebook-input .out-of {
    position: absolute;
    right: 2px;
    background-color: var(--sakai-background-color-2);
    font-size: 1em;
    color: var(--sakai-text-color-dimmed);
    top: 0px;
    border-left: 1px solid var(--sakai-border-color);
    height: 100%;
    line-height: 28px;
    padding: 13px 12px;
    margin-right: -1px;
  }
  #gradeTableWrapper .tabulator-input {
    line-height: 30px;
    text-align: center;
  }
  #gradeTableWrapper .tabulator-header,
  #gradeTableWrapper .tabulator-tableholder,
  #gradeTableWrapper .tabulator-row,
  #gradeTableWrapper .tabulator-col,
  #gradeTableWrapper .tabulator-cell {
    background: var(--sakai-background-color-1);
    border-bottom: 1px solid var(--sakai-border-color);
  }  
  #gradeTableWrapper .tabulator-row > *:nth-child(1){
    text-align: left;
  }
  #gradeTableWrapper .tabulator-row .tabulator-cell:nth-child(1) .relative .gb-value {
    overflow: hidden;
  }  
  #gradeTableWrapper .tabulator.gb-fixed-columns-1 .tabulator-row .tabulator-cell:nth-child(1),
  #gradeTableWrapper .tabulator.gb-fixed-columns-2 .tabulator-row .tabulator-cell:nth-child(2),
  #gradeTableWrapper .tabulator.gb-fixed-columns-3 .tabulator-row .tabulator-cell:nth-child(3),
  #gradeTableWrapper .tabulator.gb-fixed-columns-4 .tabulator-row .tabulator-cell:nth-child(4),
  #gradeTableWrapper .tabulator.gb-fixed-columns-5 .tabulator-row .tabulator-cell:nth-child(5) {
    border-right: 1px solid var(--sakai-border-color);
  }

#gradeTableWrapper .tabulator-headers .tabulator-col {
  color: var(--sakai-text-color-2);
  border-bottom: 1px solid var(--sakai-border-color);
  background-color: var(--sakai-background-color-2);
  height: 102px;
}

#gradeTableWrapper .tabulator-cell {
  color: var(--sakai-text-color-1);
}

#gradeTableWrapper .tabulator-row:nth-child(even) .tabulator-cell {
  background: var(--sakai-background-color-2);
}

#gradeTableWrapper .tabulator-cell,
#gradeTableWrapper .tabulator-headers .tabulator-col .tabulator-row {
  border-color: var(--sakai-border-color);
  padding: 0;
}

#gradeTableWrapper .tabulator .tabulator-cell .relative,
#gradeTableWrapper .tabulator .tabulator-headers .tabulator-col .relative {
  padding: 4px;
}

#gradeTableWrapper .tabulator .tabulator-headers .tabulator-col .relative > * {
  white-space: nowrap;
}


  #gradeTableWrapper .tabulator-headers .tabulator-col {
    text-align: left;
  }
  #gradeTableWrapper .tabulator-headers .tabulator-col .relative {
    height: 100%;
  }
  #gradeTableWrapper .relative {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  #gradeTableWrapper .tabulator-cell {
    white-space: nowrap;
  }  
  #gradeTableWrapper .gb-title {
    font-weight: bold;
    text-align: left;
    line-height: 1.2em;
    cursor: pointer;
  }
  #gradeTableWrapper .gb-title.gb-sorted-asc:after {
    font-family: 'bootstrap-icons';
    content: '\F573';
    position: absolute;
    right: 28px;
    top: 10px;
  }
  #gradeTableWrapper .gb-title.gb-sorted-desc:after {
    font-family: 'bootstrap-icons';
    content: '\F571';
    position: absolute;
    right: 28px;
    top: 10px;
  }
  #gradeTableWrapper .gb-title .gb-category {
    font-style: italic;
  }
  #gradeTableWrapper .gb-title .gb-category .gb-category-weight {
    font-style: normal;
  }
  #gradeTableWrapper .gb-title .gb-category .gb-category-weight-label,
  #gradeTableWrapper .gb-drop-info,
  #gradeTableWrapper .gb-category-points-section {
    padding-left: 18px;
  }
  #gradeTableWrapper .gb-grade-section,
  #gradeTableWrapper .gb-due-date,
  #gradeTableWrapper .gb-category,
  #gradeTableWrapper .gb-drop-info,
  #gradeTableWrapper .gb-uncategorized {
    text-align: left;
    font-size: 0.9em;
    line-height: 1.3em;
  }
  #gradeTableWrapper .gb-grade-item-flags {
    display: inline;
  }
  #gradeTableWrapper .tabulator-col .dropdown,
  #gradeTableWrapper .tabulator-cell .dropdown {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
  #gradeTableWrapper .btn-group > a {
    line-height: 10px;
    padding: 0 10px;
    opacity: 0.2;
    border-color: var(--sakai-border-color);
  }
  #gradeTableWrapper .tabulator-col:hover .btn-group > a,
  #gradeTableWrapper .tabulator-cell:hover .btn-group > a,
  #gradeTableWrapper .highlight .btn-group > a {
    opacity: 1;
  }

  #gradeTableWrapper .highlight {
    color: inherit;
    font-weight: inherit;
  }

  #gradebookSpreadsheet.gb-grouped-by-category #gradeTableWrapper .tabulator-col.gb-categorized {
    box-shadow: inset 0 5px 0 0 var(--sakai-border-color);
  }
  #gradeTableWrapper .swatch {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 4px;
    box-shadow: var(--elevation-1dp);
  }
  #gradeTableWrapper .gb-category-weight {
    color: var(--sakai-text-color-dimmed);
    font-weight: normal;
  }
  #gradeTableWrapper .gb-uncategorized {
    text-align: left;
    color: var(--sakai-text-color-dimmed);
  }
  #gradeTableWrapper .gb-value.gb-overridden {
    font-weight: bold;
  }
  #gradeTableWrapper tbody td .btn-group {
    position: absolute;
    right: 0;
    bottom: 2px;
    height: 12px;
  }

  #gradeTableWrapper .gb-notification {
    position: absolute;
    top: 50%;
    left: 10px;
    font-size: 16px;
    min-width: 16px;
    height: 20px;
    margin-top: -10px;
  }
  [class*="gb-flag"] {
    color: var(--sakai-text-color-dimmed);
    font-family: 'bootstrap-icons';
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font-style: normal;
  }
  .gb-flag-counted,
  .gb-flag-released {
    display: none;
  }
  #gradeTableWrapper .gb-extra-credit,
  #gradeTableWrapper .tabulator-col .gb-extra-credit,
  #gradeTableWrapper .tabulator-col .gb-extra-credit {
    color:var(--sakai-color-gold--darker-5);
    background-color: var(--sakai-color-gold--lighter-5) !important;
  }
  #gradeTableWrapper .gb-notification.gb-flag-extra-credit:before {
    color:var(--sakai-color-gold--darker-1);
  }
  #gradeTableWrapper .gb-excused {
    text-decoration: line-through;
    color: var(--sakai-text-color-dimmed);
  }

  .gb-flag-external:before {
    content: '\F140';
  }
  .gb-flag-read-only:before {
    content: '\F47A';
  }
  #gradeTableWrapper .tabulator-col .gb-flag-equal-weight,
  #gradeTableWrapper .tabulator-col .gb-flag-extra-credit,
  #gradeTableWrapper .tabulator-col .gb-external-app {
    font-size: 1.1em;
    vertical-align: baseline;
    display: inline-block;
  }
  #gradeTableWrapper .tabulator-col .relative > .gb-flag-equal-weight,
  #gradeTableWrapper .tabulator-col .relative > .gb-flag-extra-credit,
  #gradeTableWrapper .tabulator-col .relative > .gb-external-app {
    float: left;
    vertical-align: top;
    line-height: inherit;
    margin-right: 4px;
  }
  #gradeTableWrapper .tabulator-col .gb-flag-equal-weight:before,
  #gradeTableWrapper .tabulator-col .gb-flag-extra-credit:before {
    color: var(--sakai-text-color-dimmed);
  }
  #gradeTableWrapper .gb-save-success {
    background-color: var(--successBanner-bgcolor) !important;
  }
  #gradeTableWrapper .gb-save-success .gb-notification:before {
    font-family: "bootstrap-icons";
    content: "\F26A" !important;
    color: var(--successBanner-color);
  }
  #gradeTableWrapper .gb-just-synced {
    background-color: var(--successBanner-bgcolor) !important;
  }
  #gradeTableWrapper .gb-save-error,
  #gradeTableWrapper .tabulator-col .gb-save-error,
  #gradeTableWrapper .tabulator-col .gb-save-error {
    background-color: var(--errorBanner-bgcolor) !important;
  }
  #gradeTableWrapper .gb-save-error .gb-notification:before,
  .gb-flag-save-error:before {
    font-family: "bootstrap-icons";
    content: "\F332" !important;
    color: var(--errorBanner-color) !important;
  }
  #gradeTableWrapper .gb-save-invalid,
  #gradeTableWrapper .gb-external-invalid {
    background-color: var(--warnBanner-bgcolor) !important;
  }
  #gradeTableWrapper .gb-save-invalid .gb-notification:before,
  .gb-flag-save-invalid:before,
  #gradeTableWrapper .gb-external-invalid .gb-notification:before {
    font-family: "bootstrap-icons";
    content: "\F33A" !important;
    color: var(--warnBanner-color) !important;
  }
  #gradeTableWrapper .gb-read-only {
    color: var(--sakai-text-color-dimmed);
  }
  #gradeTableWrapper .gb-read-only .gb-notification:before {
    font-family: "bootstrap-icons";
    content: '\F47A';
    color: var(--sakai-text-color-dimmed);
  }
  #gradeTableWrapper .gb-read-only .gb-notification.gb-flag-equal-weight:after,
  #gradeTableWrapper .gb-read-only .gb-notification.gb-flag-extra-credit:after {
    font-family: "bootstrap-icons";
    content: '\F3AA';
    color: var(--warnBanner-color);
    font-size: 10px;
    position: absolute;
    right: -5px;
    bottom: -5px;
  }
  #gradeTableWrapper .gb-concurrent-edit .gb-notification:before,
  .gb-flag-concurrent-edit:before {
    font-family: "bootstrap-icons";
    content: '\F4C9';
    color: var(--errorBanner-color);
  }
  #gradeTableWrapper .tabulator .tabulator-cell.gb-dropped-grade-cell,
  #gradeTableWrapper .tabulator .tabulator-row:nth-child(2n) .tabulator-cell .gb-dropped-grade-cell,
  #gradeTableWrapper .tabulator .tabulator-row:nth-child(2n) .tabulator-cell .relative .gb-dropped-grade-cell {
    background-image: repeating-linear-gradient(135deg, var(--sakai-background-color-2), var(--sakai-background-color-2) 5px, var(--sakai-background-color-1) 5px, var(--sakai-background-color-1) 10px);
    background-clip: padding-box;
  }
  #gradeTableWrapper .tabulator .tabulator-cell.gb-dropped-grade-cell .gb-value {
    text-decoration: line-through;
  }

  /* Cell Metadata Summary */
  .gb-metadata {
    position: absolute;
    width: 300px;
    padding: 10px;
    font-size: 0.9em;
    background: var(--sakai-background-color-2);
    color: var(--sakai-text-color-1);
    z-index: 1000;
    border-radius: 5px;
    box-shadow: var(--elevation-2dp);
  }
  .gb-metadata p,
  .gb-metadata dl,
  .gb-metadata ul,
  .gb-metadata blockquote {
    margin: 0;
  }
  .gb-metadata dt {
    width: 80px !important;
    color: var(--sakai-text-color-2);
  }
  .gb-metadata dd {
    margin-left: 90px !important;
  }
  .gb-metadata blockquote {
    font-size: 1em;
    padding: 5px;
    color: var(--sakai-text-color-2);
  }
  .gb-metadata:after, .gb-metadata:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .gb-metadata:after {
    border-color: transparent;
    border-bottom-color: var(--sakai-border-color);
    border-width: 10px;
    margin-left: -10px;
  }
  .gb-metadata:before {
    border-color: transparent;
    border-bottom-color: var(--sakai-border-color);
    border-width: 10px;
    margin-left: -10px;
  }
  .gb-metadata .gb-metadata-close:before {
    position: absolute;
    right: 5px;
    top: 5px;
    font-family: 'bootstrap-icons';
    content: '\F622';
  }
  .gb-metadata .gb-metadata-notifications ul {
    list-style: none;
    padding-left: 0;
  }
  #gradebookGradesToolbar {
    border-top: 1px solid var(--sakai-border-color);
  }
  #gradebookGradesToolbar button {
    margin: 0;
  }
  .gb-student-filter {
    position: relative;
  }
  .gb-student-filter #studentFilterInput {
    height: 28px;
    font-size: 12px;
  }
  .gb-student-filter .gb-student-filter-clear-button {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    height: 16px;
    right: 8px;
    color: var(--sakai-text-color-dimmed);
  }
  .gb-grade-item-summary .gb-item-summary-counts.warn-items-hidden,
  .gb-student-summary .gb-student-summary-counts.warn-students-hidden {
    color: var(--warnBanner-color);
    font-weight: bold;
  }
  /* table caption and toggle */
  #captionToggle {
    color: var(--sakai-text-color-dimmed);
    vertical-align: middle;
    text-decoration: none;
    font-size: 25px;
    margin-left: 8px;
    padding: 0 8px;
  }
  #captionToggle:before {
    font-family: 'bootstrap-icons';
    content: '\F450';
  }
  #captionToggle:hover {
    background-color: var(--button-hover-background);
    color: var(--button-hover-text-color);
  }
  #gradeTableWrapper #gradeTableCaption {
    /* hide the caption from users, but retain for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  #gradeTableWrapper #gradeTableCaption.maximized {
    position: fixed;
    width: 80%;
    height: 60%;
    background: var(--sakai-background-color-2);
    color: var(--sakai-text-color-1);
    z-index: 1000;
    top: 20%;
    left: 150px;
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    box-shadow: var(--elevation-8dp);
    overflow: auto;
    clip: auto;
  }
  #gradeTableWrapper .gb-item-title-1,
  #gradeTableWrapper .gb-category-title-1 {
    width: calc(100% - 11px);
  }
  #gradeTableWrapper .gb-item-title-2,
  #gradeTableWrapper .gb-category-title-2 {
    width: calc(100% - 29px);
  }
  #gradeTableWrapper .gb-item-title-3,
  #gradeTableWrapper .gb-category-title-3 {
    width: calc(100% - 49px);
  }
  .tabulator .tabulator-header .tabulator-col {
    overflow: visible; /* Allow content in header cells to overflow */
  }  
  .gb-hidden-column-visual-cue {
    position: absolute;
    top: -6px;
    right: -16px;
    cursor: pointer;
    width: 30px;
    border: 1px solid transparent;
    height: 15px;
    line-height: 14px;
    padding: 0 1px;
    border-radius: 2px;
  }
  .gb-grouped-by-category .gb-hidden-column-visual-cue {
    top: -10px;
  }
  .gb-hidden-column-visual-cue:hover,
  .gb-hidden-column-visual-cue:active,
  .gb-hidden-column-visual-cue:focus {
    text-decoration: none;
    background-color: var(--sakai-background-color-1);
    border-color: var(--sakai-active-color-1);
  }
  .bi-arrows-expand-vertical:before {
    font-weight: bolder !important;
    color: var(--bs-link-color);
  }

  .gb-category-average {
      background-color: var(--sakai-background-color-2);
  }
  .gb-category-average .gb-value {
      font-weight: bold;
      color: var(--sakai-text-color-2);
  }

  /* **************************************************************** *
   *                      Gradebook Grades styles                     *
   * **************************************************************** */
   
  /* Add Gradebook Item */
  .gb-add-gb-item-button:before {
    font-family: "bootstrap-icons";
    content: "\F3AA";
    vertical-align: text-bottom;
    margin-right: 4px;
  }

  .gb-create-or-save {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Toolbar */
  #gradebookGradesToolbar {
    position: relative;
    background: var(--sakai-background-color-1);
    font-size: 0.9em;
    overflow: visible;
    width: 100%;
    margin: 0;
  }
  #gradebookGradesToolbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #gradebookGradesToolbar ul.gb-toolbar-left {
    float: left;
  }
  #gradebookGradesToolbar ul.gb-toolbar-right {
    float: right;
  }
  #gradebookGradesToolbar > ul > li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 40px;
  }
  #gradebookGradesToolbar > ul > li > * {
    line-height: initial;
  }
  #toggleGradeItemsToolbarItem:after {
    font-size: 0.9em;
    margin-left: 6px
  }
  #toggleCategories:before,
  #toggleCategoriesToolbarItem:before {
    font-size: 15px;
    margin-right: 6px;
    vertical-align: middle;
  }
  #filterByGroup {
    line-height: 1em;
    max-width: 80%;
    max-width: calc(100% - 50px);
    font-size: 12px;
  }
  #gradebookGradesToolbar .gb-item-summary.warn-items-hidden .gb-item-summary-counts {
    color: var(--sakai-color-orange);
    font-weight: bold;
  }
  /* Toolbar - Show/Hide grade items */
  #gradebookGradesToolbar .gb-toggle-grade-items-panel {
    position: absolute;
    border: 1px solid var(--sakai-border-color);
    min-width: 200px;
    max-width: 240px;
    min-height: 100px;
    max-height: 340px;
    top: 38px;
    background-color: var(--sakai-background-color-1);
    box-shadow: var(--elevation-2dp);
    z-index: 200;
    overflow: auto;
    padding-right: 14px;
  } 
  #gradeItemsTogglePanel .hide-me {
    display: none;
  }
  #gradeItemsTogglePanel input {
    margin-left: 20px;
    background-color: transparent;
    position: absolute;
    left: -100000px;
  }
  #gradeItemsTogglePanel label {
    cursor: pointer;
    display: block;
    margin: 0;
    position: relative;
    padding-right: 1.5em;
  }
  #gradeItemsTogglePanel label:hover {
    background-color: var(--sakai-background-color-2);
  }
  #gradeItemsTogglePanel input:before {
    height: 16px;
    width: 16px;
    display: inline-block;
    content: "";
  }
  #gradeItemsTogglePanel .gb-item-category-filter label {
    font-weight: bold;
  }
  #gradeItemsTogglePanel .gb-item-filter label {
    font-weight: normal;
  }
  #gradeItemsTogglePanel .gb-item-category-filter .weighting {
    font-weight: 200;
    color: var(--sakai-text-color-dimmed);
  }
  #gradeItemsTogglePanel .gb-item-filter-signal {
    height: 1.2em;
    width: 1.2em;
    border: 1px solid var(--sakai-border-color);
    background-color: var(--sakai-color-gray);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.6em;
  }
  #gradeItemsTogglePanel .off .gb-item-filter-signal,
  #gradeItemsTogglePanel .partial .gb-item-filter-signal {
    background-color: var(--sakai-background-color-1) !important;
  }
  #gradeItemsTogglePanel .gb-item-category-filter,
  #gradeItemsTogglePanel .gb-item-filter,
  #gradeItemsTogglePanel .gb-item-category-score-filter {
    clear: both;
    margin-left: 10px;
    position: relative;
    min-height: 24px;
    display: flex;
    align-items: center;
  }
  #gradeItemsTogglePanel .gb-item-filter,
  #gradeItemsTogglePanel .gb-item-category-score-filter {
    margin-left: 20px;
  }
  #gradeItemsTogglePanel .gb-no-categories .gb-item-filter {
    margin-left: 10px;
  }
  #gradeItemsTogglePanel .gb-item-category-score-filter label {
    font-style: italic;
  }
  #gradeItemsTogglePanel label {
    display: inline-block;
    width: 90%;
    width: calc(100% - 20px);
  }
  #gradeItemsTogglePanel .gb-filter-partial-signal {
    display: block;

    border-left: 1.2em solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 1.2em solid;
    border-bottom-color: inherit;
    margin-top: -1px;
    margin-left: -1px;
  }
  #gradeItemsTogglePanel #showAllGradeItems,
  #gradeItemsTogglePanel #hideAllGradeItems {
    float: right;
    font-size: 0.9em;
    margin: 0 5px 0;
    border-bottom: none;
  }
  #gradeItemsTogglePanel .gb-item-filter-group {
    border-bottom: 1px dotted var(--sakai-border-color);
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
  #gradeItemsTogglePanel .gb-item-filter-group:last-child {
    border-bottom: none;
    margin: 0;
  }
  #gradeItemsTogglePanel .gb-item-filter .gb-show-this-item,
  #gradeItemsTogglePanel .gb-item-filter.off .gb-hide-this-item,
  #gradeItemsTogglePanel .gb-item-category-filter .gb-show-this-category,
  #gradeItemsTogglePanel .gb-item-category-filter.off .gb-hide-this-category,
  #gradeItemsTogglePanel .gb-item-category-score-filter .gb-show-this-category-score,
  #gradeItemsTogglePanel .gb-item-category-score-filter.off .gb-hide-this-category-score {
    display: none;
  }
  #gradeItemsTogglePanel .gb-item-filter.off .gb-show-this-item,
  #gradeItemsTogglePanel .gb-item-category-filter.off .gb-show-this-category,
  #gradeItemsTogglePanel .gb-item-category-score-filter.off .gb-show-this-category-score {
    display: block;
  }
  #gradeItemsTogglePanel .dropdown-menu {
    max-width: 140px;
  }
  #gradeItemsTogglePanel .dropdown-menu a {
    white-space: normal;
    padding: 3px 10px;
  }

  /* Wicket Overrides */
  
  /** temporary override for page width **/
  .Mrphs-pageColumns--single {
    max-width: none !important;
  }

  /* grade log formatting */
  .grade-log-item-wrap {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .grade-log-item {
    margin-bottom: 5px;
  }

  /* Datepicker */
  .ui-datepicker {
    z-index: 50000 !important;
  }


  /* Update Ungraded modal */
  .gb-update-ungraded-confirmation.in {
    position: absolute;
    right:0;
    bottom: auto;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gb-update-ungraded-confirmation {
    z-index: 50000 !important;
  }
  .gb-update-ungraded-confirmation .modal-dialog {
    z-index: 50001 !important;
  }

  .gb-group-title {
    font-weight: bold;
    line-height: 3em;
  }

  /* Live feedback message container */
  .gb-live-feedback {
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    line-height: 35px;
    color: var(--sakai-text-color-2);
    margin: 0 0 0 10px;
  }

  /* Connection Poll message */
  #gbConnectionTimeoutFeedback {
    position: fixed;
    z-index: 99999999;
    top: 80px;
    padding: 5px;
    box-shadow: var(--elevation-2dp);
    font-size: 12px;
    width: 350px;
    margin-left: -175px;
    left: 50%;
  }

  #gbConnectionTimeoutFeedback:before {
    font-family: "bootstrap-icons";
    content: "\F33A";
  }

  /* Summary styles */
  
  #gradebookGrades .gb-student-number-cell
  {
    width: 180px;
    max-width: 180px;
    min-width: 180px;
    text-align: center;
  }

  #gradebookGrades .gb-student-number-cell .gb-title
  {
    text-align: left;
  }




  .gb-summary-grade-category-dropInfo
  {
    font-size: 0.9em;
    color: var(--sakai-text-color-dimmed);
    font-weight: normal;
    margin: 0 0 0 24px;
  }

  .gb-summary-grade-category-dropInfo span
  {
    white-space: nowrap;
  }

  .gb-summary-grade-category-col-dropInfo
  {
    font-size: 0.9em;
    color: var(--sakai-text-color-dimmed);
    font-weight: normal;
    margin: 0;
  }

  .gb-noGbItems
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 1em;
    font-size: 20px;
    text-align: center;
    color: var(--sakai-text-color-2);
    background-color: var(--sakai-background-color-3);
    grid-area: empty;
  }
  .gb-noGbItems > i
  {
    display: block;
    font-size: 3em;
  }

  .gradeTableOuterWrapper
  {
    grid-area: grades;
  }

  .gradesToolbar1
  {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    grid-column-start: 1;
    grid-column-end: span 2;
  }

  .gradesToolbar1 .captionToggleContainer
  {
    margin-left: auto;
  }

  .captionToggleContainer {
      display: flex;
      align-items: center;
  }

  .gradesToolbar2
  {
    grid-area: toolbar2;
  }

  .gradeTableArea
  {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "toolbar1 toolbar1"
      "toolbar2 toolbar2"
      "grades empty";
  }

  #gradeTableWrapper {
    background-color: var(--sakai-background-color-2);
  }

  @media all and (max-width: 1024px)
  {
    .gradeTableArea
    {
      display: block;
    }

    .gradeTableArea #gradebookGradesToolbar
    {
      margin-top: 0;
    }

    .gb-noGbItems div.act
    {
      padding-bottom: 0;
    }

    .gradeTableArea .gradeTableOuterWrapper
    {
      border-right: none;
    }
  }

  @media all and (max-width: 640px)
  {
    .gb-noGbItems
    {
      font-size: 1em;
    }
  }

  .gb-noStudents
  {
    position: absolute;
    top: calc(30vh + 58px - 0.5em);
    z-index: 100;
    width: 100%;
    text-align: center;
    line-height: 1em;
    font-size: 16px;
    color: var(--sakai-text-color-2);
  }

  .gradeTableOuterWrapper
  {
    border-right: 1px solid var(--sakai-border-color);
    position: relative;
    max-width: 100vw;
  }

  .gb-noGbItems button.active
  {
    font-size: 14px;
  }


  .form-vertical div.awesomplete {
    width: 100%;
    margin-bottom: 15px;
  }
   /* *************************************************************** *
   *                  Gradebook Import/Export styles                  *
   * **************************************************************** */
   
  #gradebookImportExport ul.exportToolbar {
    padding: 0;
    list-style: none;
  }

  #gradebookImportExport ul.exportToolbar li {
    display: inline-block;
    margin-right: 10px;
  }

  #gradebookImportExport .select-toggle label {
    display: none;
  }

  #gradebookImportExport .gb-import-export-section h2 {
    margin: 1.5em 0 0;
  }
  #gradebookImportExport .gb-import-export-section p,
  #gradebookImportExport .gb-import-export-section form {
    margin: 1em 0 0;
  }

  #hideNoChanges:before {
    font-family: 'bootstrap-icons';
    content: '\F584';
    font-size: 0.9em;
    margin-right: 6px;
  }
  #hideNoChanges.on:before {
    content: '\F26D';
  }

  /* for paired zebra striping */
  #grade_import_selection tbody tr:nth-child(4n-1), #grade_import_selection tbody tr:nth-child(4n)  {
    background-color: var(--sakai-background-color-2);
  }

  #grade_import_selection tr.gb_item td {
   border-bottom: 0;
  }

  #grade_import_selection tr.comment td {
   border-top: 0;
  }
  /* end paired zebra striping */


  #grade_import_selection tr.comment td.item_title {
    font-style: italic;
    text-indent: 15px;
  }

  #grade_import_selection tr.no_changes {
    color: var(--sakai-text-color-dimmed);
  } 

  #grade_import_selection tr.external {
    background-color: var(--sakai-background-color-2) !important;
    color: var(--sakai-text-color-dimmed);
  }

  #grade_import_selection tr.external td.item_status {
    font-style: italic;
  }

  #grade_import_selection tr.selected {
    background-color: var(--infoBanner-bgcolor) !important;
  }


  #customExportModal #filterByGroup {
    width: 100%;
  }

  div.previewGradesContainer, #missingUsersContent, #unknownUsersContent {
    max-height: 20em;
    overflow-y: scroll;
  }

  div.previewGradesContainer table {
    width: 100%;
   }

  div.modal-footer.act {
    padding: 15px;
  }
  /* ********************************************************************* *
   *                      Gradebook Permissions styles                     *
   * ********************************************************************* */

  .gb-permissions-form {
    border-top: 1px solid var(--sakai-border-color);
    margin-top: 20px !important;
    padding-top: 10px;
  }
  .gb-permissions-rules {
    margin: 10px 0;
  }
  .gb-permissions-rule {
    padding: 5px;
  }
  .gb-permissions-rule:nth-child(2n-1) {
    background-color: var(--sakai-background-color-2);
  }
  .gb-permissions-add-rule {
    margin: 10px 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sakai-border-color);
  }

  /* ********************************************************************* *
   *                      Gradebook Settings styles                        *
   * ********************************************************************* */

  .gb-inline-wrap {
    margin-bottom: 10px;
  }
  .gb-inline-checkbox {
    display: inline !important;
  }
  .gb-category-sort-column {
    width: 45px;
  }
  .gb-category-sort-handle,
  .gb-category-sort-handle:hover {
    text-decoration: none !important;
    color: var(--sakai-text-color-dimmed) !important;
  }
  .gb-category-sort-handle:before {
    font-family: "bootstrap-icons";
    content: "\F479";
    font-size: 2em;
  }
  .gb-category-sort-placeholder {
    border: 3px dashed var(--sakai-border-color);
    height: 45px;
  }

  #settingsAccordion {
    .gb-settings-header {
      background: var(--sakai-background-color-2);
    }
    .card {
      margin-bottom: 6px;
    }
  }

  /* reset the padding and add to link instead, to make whole div clickable. See #3756 */
  .panel-heading {
    padding: 0 !important;
  }

  .panel-heading > .panel-title > a {
     display: inline-block;
     height: 100%;
     width: 100%;
     padding: 10px 15px;
  }

  .gb-schema-table {
    min-width: min-content;
  }

  .gb-schema-chart {
    max-width: 100%;
  }

  .gb-category-runningtotal {
    background-color: var(--sakai-background-color-2);
  }
  /* *************************************************************** *
   *                      Gradebook Tool styles                      *
   * *************************************************************** */
   
   /* style applied to the UL rendered for a feedback panel */
  ul.feedbackPanel {
    list-style-type: none;
    margin: 0;
  }
  ul.feedbackPanel li span {
     display: block;
  }
   
   /* Bootstrap > Morpheus overrides */
  .dropdown-menu>li>a,
  .nav>li>a {
    text-decoration: none;
  }

  .modal-add-or-edit-gbitem input[type="text"] {
    min-width: 70px;
  }

  /* required labels should have a prefix asterisk */
  .control-label.required:before {
    content: '*';
  }

  /* align the input boxes with the remove button in the grading schema table */
  .table>tbody>tr>td {
    vertical-align: middle !important;
  }
  .btn-table {
    height: 34px;
  }

  tr.categoryRow {
      font-weight: bold;
  }
  div.gb-title {
      word-wrap: break-word;
      width: 350px;
  }
  span.itemTitle {
      word-wrap: break-word;
      display: block;
      width: 280px;
  }

  div.gb-summary-legend, div.gb-table-legend {
      display: table;
  }
  div.gb-table-legend {
      margin: 1em 0;
  }
  div.gb-summary-legend-row, div.gb-table-legend-row {
      display: table-row;
  }
  div.gb-summary-legend-col, div.gb-summary-legend-col-first, div.gb-table-legend-col, div.gb-table-legend-col-first {
      display: table-cell;
      padding-right: 4px;
  }
  div.gb-summary-legend-col-first, div.gb-table-legend-col-first {
      text-align: right;
  }
  tr.categoryRow{
      color: var(--sakai-primary-color-1);
  }
  form.quickEntryForm {
      margin-top: 1em;
      margin-bottom: 1em;
      width: 100%;
  }
  form.quickEntryForm .tabulator-col{
      background-color: var(--sakai-background-color-3);
  }
  form.quickEntryForm table.table-striped tbody tr td{
      vertical-align: top !important;
  }
  form.quickEntryForm h3{
      display: inline-block;
  }
  form.quickEntryForm input.quickEntryComment, form.quickEntryForm textarea {
      width: 100%;
  }
  form.quickEntryForm input.disabledGrade {
      cursor: not-allowed;
      background-color: var(--sakai-background-color-3);
  }
  form.quickEntryForm input.disabledGrade, form.quickEntryForm input.enabledGrade {
      width: 7ch;
  }
  form.quickEntryForm input.errorCell {
      border: 3px solid red;
  }
  form.quickEntryForm span.summarycount {
      margin-right: 3em;
  }
  form.quickEntryForm div.quickentrySpacing {
      display: flex;
      align-items: end;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  form.quickEntryForm div.quickentrySpacing span.buttons {
      align-self: end;
  }
  form.quickEntryForm div.quickentrySpacing>* {
      margin-bottom: 1rem;
  }
  form.quickEntryForm span.detailsFont {
      font-size: 16px;
  }
  div.quickEntryBulk div#buttonDiv {
      margin-top: 1em;
  }
  div.quickEntryBulk div.bulkInputArea {
      padding: 2em;
      margin-top: 1em;
      background-color: var(--sakai-background-color-2);
      border: 1px solid var(--sakai-border-color-1);
  }
  div.quickEntryBulk textarea {
      display: block;
      width: 485px;
      height: 100px;
  }

  .dropdown-toggle::after {
    display: none;
  }
  
  // Masking the auto selected text in dropdowns in Firefox
  .dropdown-menu.show {
    a::-moz-selection {
      background: none;
    }
  }
}

div.wicket-modal, .#{$namespace}sakai-gradebookng {
  .checkbox input[type="checkbox"][disabled]+span,
  .radio input[type="radio"][disabled]+span,
  .checkbox input[type="checkbox"][disabled]+label,
  .radio input[type="radio"][disabled]+label{
    color: var(--sakai-text-color-dimmed);
  }
}
div.wicket-modal div.w_content_3 {
  border: none; /** don't want border wrapping content inside the modal **/
}
div.wicket-modal div.w_content {
  background: var(--sakai-modal-content-bg);
}
div.wicket-modal h3.w_captionText {
  padding: 20px;
  font-size: 1.5em;
  position: relative;
  height: auto;
}
div.wicket-modal div.w_caption {
  min-height: 60px;
  height: auto;
}
div.wicket-mask-dark {
  background-color: var(--sakai-background-color-1);
  opacity: 0.6;
  filter: alpha(opacity=6);
}
.gb-blur {
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
  filter: url(/gradebookng-tool/images/blur.svg#blur);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
div.wicket-mask-transparent {
  opacity: 0.1; 
  background-color: var(--sakai-color-black); 
  filter: alpha(opacity=10); 
}
/* IE9-11 does not support a blur filter. As such, we fallback to an opaque mask */
/* Note: IE8 and below are not supported as Bootstrap does not support IE8 */
/* IE9 blur fallback */
body:nth-child(n) div.wicket-mask-dark {
  filter: alpha(opacity=\95);
  background-color: \#000;
}
div.wicket-modal div.w_content_container {
  /* give wicket model content some padding */
  padding: 0 20px 20px;
}
div.wicket-modal div.w_content_container > div > h2:first-child,
div.wicket-modal div.w_content_container > div > form > h2:first-child {
  /* remove the large morpheus top padding and margin from the first header element */
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--sakai-border-color);
}
/* override Bootstrap for the date picker */
div.wicket-modal div.w_content_container .input-group-btn button {
  font-size: 12px;
  height: 30px;
}
div.wicket-modal div.w_content_container .input-group-btn button > .glyphicon {
  top: -1px;
}

div.wicket-modal .w_topLeft,
div.wicket-modal .w_top,
div.wicket-modal .w_topRight,
div.wicket-modal .w_bottomLeft,
div.wicket-modal .w_bottom,
div.wicket-modal .w_bottomRight {
  background-image: none !important;
}
div.wicket-modal div.w_left,
div.wicket-modal div.w_right {
  background-image: none !important;
}
div.wicket-modal a.w_close {
  color: var(--sakai-active-color-1);
  transform: translateY(120%);
}
div.wicket-modal div.w_caption {
  cursor: move;
  background: var(--sakai-modal-header-bg);
  color: var(--sakai-modal-header-color);
}
div.wicket-modal div.w_right > div {
  box-shadow: var(--elevation-4dp);
}

div.wicket-modal .w_blue div.w_caption,
div.wicket-modal .w_blue div.w_content
{
  background: var(--sakai-background-color-1);
  color: var(--sakai-text-color-1);
}

div.wicket-modal {
  z-index: 999 !important;
  max-width: 100%;
  position: absolute;
}

div.wicket-mask-transparent, div.wicket-mask-dark {
  z-index: 998 !important;
}

/* Placing Grade Rubric modal */
.gb-rubric-grading-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1100px;
}

.gb-input {
  padding-top: 0;
  padding-bottom: 1px
}

.gb-summary-grade-panel {
  position: relative;
}
.gb-summary-grade-panel .gb-summary-category-row td:first-child {
  font-weight: bold;
}
.gb-summary-grade-panel .gb-summary-grade-row td:first-child {
  padding-left: 34px;
}
.gb-summary-grade-panel .gb-no-categories .gb-summary-grade-row td:first-child {
  padding-left: 0;
}
.gb-summary-grade-duedate,
.gb-summary-grade-score,
.gb-summary-grade-weight,
.gb-summary-category-grade,
.gb-summary-category-weight {
  text-align: center;
}
.gb-summary-grade-panel .gb-summary-course-grade {
  margin: 0 0 10px 1px;
}
.gb-summary-grade-panel .gb-summary-course-grade .card {
  margin-bottom: 0;
}
.gb-summary-grade-panel .gb-summary-course-grade .card-body {
  padding: 8px 15px;
}
.gb-summary-grade-panel .gb-summary-course-grade-label {
  padding-right: 10px;
}
.gb-summary-grade-panel .gb-summary-expand-all {
  padding-right: 8px;
}
.gb-summary-grade-panel .gb-summary-category-toggle,
.gb-summary-grade-panel .gb-summary-category-toggle:hover,
.gb-summary-grade-panel .gb-summary-category-toggle:active {
  text-decoration: none;
  display: flex;
  flex-grow: 2;
}
.gb-summary-grade-panel .gb-summary-category-toggle-container {
  display: flex;
  justify-content: space-between;
}
.gb-summary-grade-title {
  font-weight: normal;
}

.gb-summary-grade-score sakai-rubric-student-button {
    float: right;
}
.gb-summary-grade-panel .gb-summary-grade-stats.pull-right {
  margin-left: 8px;
}
.gb-summary-grade-panel .gb-summary-grade-stats, .gb-summary-grade-panel .gb-summary-grade-stats:hover {
  text-decoration: none;
}

.gb-summary-grade-panel .gb-summary-grade-stats:before {
  font-family: 'bootstrap-icons';
  content: '\F17A';
  text-decoration: none;
  font-weight: normal;
}

.gb-summary-grade-panel .gb-summary-category-toggle:before {
  font-family: 'bootstrap-icons';
  content: '\F282';
  padding-right: 5px;
  width: 24px;
  text-align: center;
}
.gb-summary-grade-panel .gb-summary-category-toggle.collapsed:before {
  content: '\F285';
}
.gb-summary-navigate-students {
  margin-bottom: 20px;
}
.gb-grade-summary-content .tabpanel {
  display: block;
  margin-top: 10px;
}
.gb-summary-grade-panel {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--sakai-border-color);
}
.gb-summary-grade-panel .gb-summary-grade-flags {
  padding-left: 10px;
  float: right;
}
.gb-summary-not-released-flag,
.gb-summary-not-released-message {
  color: var(--sakai-text-color-dimmed);
}
#studentGradeSummary {
  margin: 30px 0 0;
}
.gb-grade-summary-close-confirmation {
  z-index: 50000 !important;
}
.gb-grade-summary-close-confirmation .modal-dialog {
  z-index: 50001 !important;
}
.gb-summary-print {
  position: absolute;
  top: 11px;
  right: 10px;
}
.gb-summary-print:before {
  font-family: 'bootstrap-icons';
  content: '\F500';
  padding-right: 4px;
}


.gb-summary-previous-student {
  float: left;
  padding-left: 20px;
  margin-bottom: 10px;
}
.gb-summary-previous-student:before {
  font-family: 'bootstrap-icons';
  content: '\F12F';
  padding-right: 4px;
}
.gb-summary-next-student {
  float: right;
  padding-right: 20px;
  margin-bottom: 10px;
}
.gb-summary-next-student:after {
  font-family: 'bootstrap-icons';
  content: '\F138';
  padding-left: 4px;
}
.gb-summary-grade-score-outof {
color: var(--sakai-text-color-dimmed);
}
#studentGradeSummary .table>tbody+tbody {
border-width: 1px;
}
#studentGradeSummary .table>tbody.gb-summary-assignments-tbody+tbody.gb-summary-category-tbody {
border-width: 2px;
}
.gb-summary-category-row .tabulator-cell,
.gb-summary-category-row .tabulator-col {
background-color: var(--sakai-background-color-2);
}
.gb-summary-grade-comments div{
overflow-y: scroll;
overflow-x: hidden;
max-height:100px;
}

.w_blue .w_content_container {
  max-height: 450px;
}

.form-vertical > div.awesomplete {
  display: flex;
}

.gb-editable,
.gb-editable:before {
  height: 34px;
}

.tabulator-cell.gb-category-average{
  cursor: default !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  font-weight: lighter;
}

.tabulator .tabulator-tableholder .tabulator-range-overlay {
  z-index: 11;
}

.gb-summary-grade-score-dropped
{
  background-image: repeating-linear-gradient(135deg, var(--sakai-background-color-2), var(--sakai-background-color-2) 5px, var(--sakai-background-color-1) 5px, var(--sakai-background-color-1) 10px);
  position: relative;
}

.gb-summary-grade-score-dropped .gb-summary-grade-score-raw,
.gb-summary-grade-score-excused .gb-summary-grade-score-raw
{
  text-decoration: line-through;
}

.gb-flag-not-counted:before, .gb-flag-excused:before {
  font-family: 'bootstrap-icons';
  content: '\F1DF';
  text-decoration: line-through;
}
.gb-flag-not-released:before {
  font-family: 'bootstrap-icons';
  content: '\F33F';
}
.gb-flag-extra-credit:before {
  font-family: 'bootstrap-icons';
  content: '\F4FC';
}
.gb-flag-equal-weight:before {
  font-family: 'bootstrap-icons';
  content: '\2696';
}

// Fix for Tabulator bug where the range-active class sometimes remains on previously selected cells
// when navigating through cells using the keyboard (I don't know why tabulator does this)
.tabulator-range-active {
  display: none;
}

/* **************************************************************** *
 *                      Gradebook Grade comparison styles           *
 * **************************************************************** */

div.wicket-modal #studentGradesComparison-ModalContent .studentGradesComparison-Header {
  margin: 0 0 15px 3px;
}

div.wicket-modal #studentGradesComparison-ModalContent .studentGradesComparison-Header span {
  color: var(--sakai-primary-color-1);
  font-weight: 600;
}

div.wicket-modal #studentGradesComparison-ModalContent .studentGradesComparison-TableContainer .table .comparing-current-user-row {
  background-color: var(--sakai-active-color-1);
}

div.wicket-modal #studentGradesComparison-ModalContent .studentGradesComparison-TableContainer .table .comparing-current-user-row td {
  font-weight: bold;
  background: none;
}

#settingsGradeRelease .grade-comparison .grade-comparison-options input[disabled] {
  background-color: var(--sakai-text-color-disabled);
}

#settingsGradeRelease .grade-comparison .grade-comparison-options > span, #settingsGradeRelease .grade-comparison .grade-comparison-options > label {
  margin-right: 8px;
}

#settingsGradeRelease .checkbox {
  margin-bottom: 12px;
}

#gradeSummaryTable .gb-summary-assignments-tbody .compare-grades-link {
  float: right;
  margin-right: 10px;
}

#gradeSummaryTable .gb-summary-assignments-tbody .gb-summary-grade-flags + .compare-grades-link {
  margin-right: -6px !important;
}

#loading-grade-summary{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffffa8;
  z-index: 5;
  top: 0;
  left: 0;
  display: flex;
  align-content: center;
  justify-content: center;
}

#loading-grade-summary img{
  height: 20px;
  width: 20px;
  margin: auto;
}
/* **************************************************************** */
